import React from "react"
import PropTypes from 'prop-types';
import ClassNames from "classnames"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTimes } from '@fortawesome/free-solid-svg-icons'
import './TabList.scss';
const TabList = ({files,onChooseId,onChooseFn,noSaveArr,onCloseFn})=>{
  return (
    <ul className="nav nav-pills tab-ul">
      {files.map(file=>{
        const withNoSaveStatus = noSaveArr.includes(file.id);
        const aclassname = ClassNames({
          'nav-link':true,
          "active":file.id ===onChooseId,
          "withNoSave":withNoSaveStatus,
        })

        return(
          <li className="nav-item" key={file.id}
          onClick={(e)=>{e.preventDefault();onChooseFn(file.id)}}
          >
              <a className={aclassname} href="#">
                  {file.title}
                  <span className="ml-2 close-icon"
                    onClick={(e)=>{e.stopPropagation(); onCloseFn(file.id)}}
                  >
                    <FontAwesomeIcon icon={faTimes} title="关闭" size="sm"/>
                  </span>
                  {
                    withNoSaveStatus &&
                    <span className="rounded-circle ml-2 unsave-icon"></span>
                  }
              </a>
          </li>
        )
      })}
    </ul>
  )
}

TabList.propTypes={
  files:PropTypes.array,
  onChooseId:PropTypes.string,
  onChooseFn:PropTypes.func,
  noSaveArr:PropTypes.array,
  onCloseFn:PropTypes.func,
}
TabList.default={
  noSaveArr:[],//没有保存的数组
}


export default TabList
